<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Compound Pulley</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="600"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Parameters
        const cx = canvas.width / 2;
        const cy = 230;
        const R = 100;
        const r = 50;
        const blockWidth = 60;
        const blockHeight = 60;
        const axleRadius = 8;
        const supportWidth = 24;
        const ceilingY = 80;

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY) {
            const headLength = 15;
            const angle = Math.atan2(toY - fromY, toX - fromX);

            // Draw line
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();

            // Draw arrowhead (filled triangle)
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 7), toY - headLength * Math.sin(angle - Math.PI / 7));
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 7), toY - headLength * Math.sin(angle + Math.PI / 7));
            ctx.closePath();
            ctx.fill();
        }

        // 1. Draw Ceiling
        ctx.beginPath();
        ctx.moveTo(40, ceilingY);
        ctx.lineTo(canvas.width - 40, ceilingY);
        ctx.stroke();

        // Draw hatching for the ceiling
        const oldLineWidth = ctx.lineWidth;
        ctx.lineWidth = 1;
        for (let i = 40; i < canvas.width - 40; i += 15) {
            ctx.beginPath();
            ctx.moveTo(i, ceilingY);
            ctx.lineTo(i + 15, ceilingY - 15);
            ctx.stroke();
        }
        ctx.lineWidth = oldLineWidth;

        // 2. Draw Support Bracket
        ctx.beginPath();
        ctx.rect(cx - supportWidth / 2, ceilingY, supportWidth, cy - ceilingY);
        ctx.stroke();

        // 3. Draw Axle/Bearing
        ctx.beginPath();
        ctx.arc(cx, cy, axleRadius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx, cy, axleRadius - 2.5, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.fillStyle = 'black';

        // 4. Draw Outer Pulley (Radius R)
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.stroke();

        // 5. Draw Inner Pulley (Radius r)
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, 2 * Math.PI);
        ctx.stroke();

        // 6. Draw Rope and Block A
        const ropeA_startX = cx + R;
        const ropeA_startY = cy;
        const ropeA_endY = 420;
        ctx.beginPath();
        ctx.moveTo(ropeA_startX, ropeA_startY);
        ctx.lineTo(ropeA_startX, ropeA_endY);
        ctx.stroke();
        
        const blockA_X = ropeA_startX - blockWidth / 2;
        const blockA_Y = ropeA_endY;
        ctx.beginPath();
        ctx.rect(blockA_X, blockA_Y, blockWidth, blockHeight);
        ctx.stroke();
        ctx.font = '30px Times New Roman';
        ctx.fillText('A', ropeA_startX, blockA_Y + blockHeight / 2);

        // 7. Draw Rope and Block B
        const ropeB_startX = cx - r;
        const ropeB_startY = cy;
        const ropeB_endY = 380;
        ctx.beginPath();
        ctx.moveTo(ropeB_startX, ropeB_startY);
        ctx.lineTo(ropeB_startX, ropeB_endY);
        ctx.stroke();

        const blockB_X = ropeB_startX - blockWidth / 2;
        const blockB_Y = ropeB_endY;
        ctx.beginPath();
        ctx.rect(blockB_X, blockB_Y, blockWidth, blockHeight);
        ctx.stroke();
        ctx.fillText('B', ropeB_startX, blockB_Y + blockHeight / 2);

        // 8. Draw Radius Labels
        // Label R
        const R_angle = (220 * Math.PI) / 180; // down-left
        const R_endX = cx + R * Math.cos(R_angle);
        const R_endY = cy + R * Math.sin(R_angle);
        drawArrow(cx, cy, R_endX, R_endY);
        ctx.font = 'italic 30px Times New Roman';
        ctx.fillText('R', cx - 45, cy + 45);

        // Label r
        const r_angle = (-35 * Math.PI) / 180; // up-right
        const r_endX = cx + r * Math.cos(r_angle);
        const r_endY = cy + r * Math.sin(r_angle);
        drawArrow(cx, cy, r_endX, r_endY);
        ctx.fillText('r', cx + 30, cy - 10);
        
        // 9. Draw Bottom Text Label
        ctx.font = '30px "KaiTi", "SimSun"'; // Use Chinese fonts
        ctx.fillText('题 2 图', cx, 550);

    </script>
</body>
</html>